<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
    <title>layerModel例子</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="layerModel/jquery.layerModel.js"></script>
	<link type="text/css" rel="stylesheet" href="layerModel/layerModel.css"/>
	<style type="text/css">
	* { margin:0;padding:0; }
	body { background:#fff; font:12px/150% "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
	a{ color:#09c; }
	a:hover{ color:#000; text-decoration:none; }
	.f_l{ float:left; }
	.f_r{ float:right; }
	.header{ background:#f5f5f5; height:60px; border-bottom:1px solid #e5e5e5; width:100%; }
	.header_box{ width:960px; margin:0 auto; overflow:hidden; line-height:60px; }
	.header_box .logo{ font-size:24px; font-weight:400; color:#333; height:30px; line-height:30px; float:left; border-right:2px solid #c9c9c9; margin-top:15px; padding-right:20px; }
	.header_box .sub_tit{ font-size:22px; font-weight:400; font-family:'宋体'; color:#666; height:30px; line-height:30px; overflow:hidden; margin-top:15px; float:left; padding-left:20px; }
	.header_box .f_r{ font-size:12px; margin:5px -10px 0 0; }
	.header_box .f_r a{ margin-right:10px; }
	.wrapper{ width:960px; margin:2% auto 0; padding-bottom:100px; }
	.wrapper h3{ font-size:14px; font-weight:700; color:#333; height:30px; line-height:30px; font-family:"Microsoft yahei", Arial; margin-bottom:5px; }
	.code_box{ width:960px; overflow:hidden; border-bottom:1px solid #e1e1e1; padding-bottom:20px; margin-bottom:40px; }
	.code_box pre{ width:340px; background:#f5f5f5; padding:10px 20px; font-family:"Consolas","Courier New",Courier,mono; font-size:13px; line-height:18px; border:1px solid #eee; float:left; color:#333; }
	.code_box .run{ border:1px solid; border-radius:2px; cursor:pointer; font-family:"Microsoft yahei", Arial; font-size:12px; width:50px; height:22px; line-height:22px; display:block; text-align:center; border-color:#c3c3c3; background:#ececec; color:#333; background:-webkit-gradient(linear,center bottom,center top,from(#ececec),to(#f4f4f4)); background:-moz-linear-gradient(90deg,#ececec,#f4f4f4); text-decoration:none; }
	.con_right{ width:558px; float:left; padding-left:20px; }
	.con_right p{ font-size:13px; color:#515151; margin-bottom:10px; line-height:24px; }
	
	.param_tb{ width:960px; border-collapse:collapse; border-bottom:1px solid #e1e1e1; border-left:1px solid #e1e1e1; font-size:13px; color:#333; }
	.param_tb tr td{ line-height:20px; padding:5px 0; text-align:center; border-right:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; }
	.param_tb tr .t_l{ text-align:left; padding:5px 10px; }
	.param_tb .even td{ background:#f5f5f5; }
	.param_tb th{ background:#f5f5f5; line-height:40px; border-right:1px solid #e1e1e1; font-family:"Microsoft yahei", Arial; font-size:14px; font-weight:700; border-top:2px solid #4D90F0; }
	.param_tb p{ line-height:20px; padding:5px 0; }
	
	.html_code{ margin-top:50px; }
	.html_code p{ font-size:13px; margin-bottom:10px; }
	.html_code pre{ width:918px; background:#f5f5f5; padding:10px 20px; font-family:"Consolas","Courier New",Courier,mono; font-size:13px; line-height:18px; border:1px solid #eee; color:#333; margin-bottom:20px; }
	
	#demo0{width:400px;height: 200px;background: #e5e5e5;display: none;text-align: center;border:1px solid red;}
	#demo1{width:400px;height: 200px;background: #e5e5e5;display: none;text-align: center;border:1px solid red;}
	#demo2{width:500px;height: 300px;background: #f60;text-align: center;border: 1px solid red;display: none;}
	#demo3{width:300px;height: 200px;background: #e5e5e5;display: none;text-align: center;}
	#demo4{width:400px;height: 200px;background: #e5e5e5;display: none;text-align: center;border:1px solid red;}
	#demo5{width:400px;height: 200px;background: #e5e5e5;display: none;text-align: center;border:1px solid red;}
	
	#demo6{width:400px;height: 200px;background: #e5e5e5;display: none;text-align: center;border:1px solid red;}
	#demo7{width:400px;height: 200px;background: #e5e5e5;display: none;text-align: center;border:1px solid red;}
	#demo8{width:400px;height: 200px;background: #e5e5e5;display: none;text-align: center;border:1px solid red;}
	#demo9{width:400px;height: 200px;background: #e5e5e5;display: none;text-align: center;border:1px solid red;}
	#demo10{width:400px;height: 200px;background: #e5e5e5;display: none;text-align: center;border:1px solid red;}
	#demo11{width:400px;height: 200px;background: #e5e5e5;display: none;text-align: center;border:1px solid red;}
	#demo12{width:400px;height: 200px;background: #e5e5e5;display: none;text-align: center;border:1px solid red;}
	#demo13{width:730px;display: none;border:1px solid #e5dfda;border-radius:5px;text-align: center;}
	#demo14{width:730px;display: none;border:1px solid #e5dfda;border-radius:5px;text-align: center;}
	
	#demo15{width:400px;display: none;border:1px solid #e5dfda;border-radius:5px;text-align: center;}
	#demo16{width:650px;display: none;border:1px solid #e5dfda;border-radius:5px;text-align: center;}
	#demo17{width:730px;display: none;border:1px solid #e5dfda;border-radius:5px;text-align: center;}
	#demo18{width:730px;display: none;border:1px solid #e5dfda;border-radius:5px;text-align: center;}
	
	#demo19{width:400px;height: 200px;background: #e5e5e5;display: none;text-align: center;border:1px solid red;}
	
	</style>
	<script>
	$(function(){
		$("#demoBtn0").click(function(){
			$("#demo0").layerModel({init:function(){
				alert("弹出层初始化完成！");
			}});
		});
		$("#demoBtn1").click(function(){
			$("#demo1").layerModel();
		});
		$("#demoBtn2").click(function(){
			$('<div id="demo2">这是自定义弹出内容!通过弹出层弹出来</div>').layerModel();
		});
		$("#demoBtn3").click(function(){
			$('<iframe width="900" height="400" scrolling="yes" src="http://www.baidu.com"></iframe>').layerModel();
		});
		$("#demoBtn4").click(function(){
			$("#demo4").layerModel({
				locked : false
			});
		});
		$("#demoBtn5").click(function(){
			$("#demo5").layerModel({
				drag : false
			});
		});
		$("#demoBtn6").click(function(){
			$("#demo6").layerModel({"head":false}).css("color","red");
		});
		$("#demoBtn7").click(function(){
			$("#demo7").layerModel({
				close : function(){
					alert("你好，关闭回调事件");
					return true;
				}
			});
		});
		$("#demoBtn8").click(function(){
			$("#demo8").layerModel({
				timer : 10000
			});
			var timer = 10;
			window.setInterval(function(){
				if(timer > 0) {
					timer--;
					$("#sss").html(timer);
				}
			}, 1000);
		});
		$("#demoBtn9").click(function(){
			$("#demo9").layerModel({
				title : "你是我的小呀小苹果"
			});
		});
		$("#demoBtn10").click(function(){
			$("#demo10").layerModel({
				isClose : false
			});
		});
		$("#demoBtn11").click(function(){
			$("#demo11").layerModel({
				shake : true
			});
		});
		$("#demoBtn12").click(function(){
			$("#demo12").layerModel({
				fixed : false,
				center : false,
				left : 100,
				top : 100
			});
			$('body,html').animate({scrollTop :10},1000);
		});
		$("#demoBtn13").click(function(){
			$("#demo13").layerModel({
				staySame : true
			});
		});
		$("#demoBtn16").click(function(){
			$("#demo16").layerModel();
		});
		$("#demoBtn19").click(function(){
			$("#demo19").layerModel({head : false ,blurClose : true});
		});
	});
</script>
</head>
<body>
<div id="demo1">
	这是页面本来就存在的内容！<br/>
	通过插件给它show出来！
</div>

<div id="demo4">
	没有遮罩层的弹出效果！
</div>

<div id="demo5">
	无法拖拽的弹出效果！
</div>

<div id="demo6">
	没有头部的弹出效果
	<a href="javascript:$('#demo6').close();">关闭</a>
</div>

<div id="demo7">
	有回调函数弹出效果！
</div>

<div id="demo0">
	初始化完成有回调函数！
</div>

<div id="demo8">
	定时关闭的弹出层<br/>
	<span id="sss">10</span>秒后关闭弹出层！
</div>

<div id="demo9">
	自定义标题的弹出效果！
</div>

<div id="demo10">
	没有关闭按钮的弹出层
	<a href="javascript:$('#demo10').close();">关闭</a>
</div>

<div id="demo11">
	抖动的弹出层
</div>

<div id="demo12">
	自定义位置的弹出层
</div>

<div id="demo13">
	原始模样的弹出层，我本来就这么丑。。。<a href="javascript:$('#demo13').close();">关闭</a>
	<img src="http://ossweb-img.qq.com/images/cf/web201105/story_img.jpg" width="728" height="257" alt="随便找了一张图" />
</div>

<div id="demo14">
	点下面的链接可以自定义关闭层哦！
	<a href="javascript:$('#demo14').close();">关闭</a>
</div>

<div id="demo15">
	<a href="javascript:;" onclick="$('#aaa').hide();$('#bbb').show();">搞乱位置</a><br/>
	<a href="javascript:$('#demo15').fix();">点我修正位置</a>
	<div id="aaa" style='height:100px;width:50px;'>aaa</div>
	<div id="bbb" style='height:300px;width:450px;display:none;'>bbb</div>
</div>

<div id="demo16">
	<a href="javascript:$('#demo16').close();">关闭</a><br/>
	<a href="javascript:;" onclick="$('#demo17').layerModel();">再弹出一个来</a>
	<img src="http://ossweb-img.qq.com/images/cf/web201105/Keyboard.jpg" width="644" height="207" alt="随便找了一张图" />
</div>

<div id="demo17">
	<a href="javascript:$('#demo17').close();">关闭</a><br/>
	<a href="javascript:;" onclick="$('#demo18').layerModel();">再弹出一个来</a>
	<img src="http://ossweb-img.qq.com/images/cf/web201105/story_img.jpg" width="728" height="257" alt="随便找了一张图" />
</div>

<div id="demo18">
	<a href="javascript:$('#demo18').close();">关闭</a><br/>
	<img src="http://ossweb-img.qq.com/images/cf/web201105/story_img.jpg" width="728" height="257" alt="随便找了一张图" />
</div>

<div id="demo19">
	点我外部，可以将我关闭哦！
</div>

<div class="header">
	<div class="header_box">
		<h1 class="logo">layerModel v1.0</h1>
		<h2 class="sub_tit">演示与说明</h2>
		<span class="f_r">by : <a href="javascript:;">zhoukun</a></span>
	</div>
</div>
<div class="wrapper">

<h3>弹出页面上存在的Dom元素</h3>
<div class="code_box">
	<pre>
	$("#demo1").layerModel();
	</pre>
	<div class="con_right">
		<p>需要先将HTML结构添加到页面中，然后设置其隐藏(display:none),<br/>然后选中该dom元素调用layerModel方法</p>
		<a href="javascript:void(0)" class="run" id="demoBtn1">运行</a>
	</div>
</div>


<h3>弹出html拼接的dom元素</h3>
<div class="code_box">
	<pre>
	$("&lt;div id='demo2'&gt;这是拼接出来的<br/>html元素！&lt;/div&gt;").layerModel();
	</pre>
	<div class="con_right">
		<p>
			拼接的html至少有一个dom元素包住，直接的文字是不能调用layerModel方法的<br/>
			如:&lt;div&gt;这是弹出层内容，外面要有一个div包裹住&lt;/div&gt;
		</p>
		<a href="javascript:void(0)" class="run" id="demoBtn2">运行</a>
	</div>
</div>

<h3>弹出iframe</h3>
	<div class="code_box">
	<pre>
	$('&lt;iframe width="600px" height="500px;"<br/> scrolling="yes" src="http://www.baidu.com"&gt;<br/>&lt;/iframe&gt;').layerModel();
	</pre>
	<div class="con_right">
		<a href="javascript:void(0)" class="run" id="demoBtn3">运行</a>
	</div>
</div>

<h3>遮罩层</h3>
	<div class="code_box">
	<pre>
	$("#demo4").layerModel({
		locked : false
	});
	</pre>
	<div class="con_right">
		<p><b>locked：</b>该参数为false时，将不显示遮罩层，没有遮罩层的情况下可以方便对页面继续进行操作。</p>
		<a href="javascript:void(0)" class="run" id="demoBtn4">运行</a>
	</div>
</div>

<h3>关闭拖拽</h3>
<div class="code_box">
	<pre>
	$("#demo5").layerModel({
		drag : false
	});
	</pre>
	<div class="con_right">
		<p><b>drag：</b>该参数为false时将关闭拖拽的功能。<br />
		</p>
		<a href="javascript:void(0)" class="run" id="demoBtn5">运行</a>
	</div>
</div>

<h3>没有头部的弹出层</h3>
<div class="code_box">
	<pre>
	$("#demo6").layerModel({"head":false});
	</pre>
	<div class="con_right">
		<p>设置head:false可以弹出不带头部的弹出效果</p>
		<a href="javascript:void(0)" class="run" id="demoBtn6">运行</a>
	</div>
</div>

<h3>弹出层初始化完成回调函数</h3>
<div class="code_box">
	<pre>
	$("#demo0").layerModel({init:function(){
		alert("弹出层初始化完成！");
	}});
	</pre>
	<div class="con_right">
		<a href="javascript:void(0)" class="run" id="demoBtn0">运行</a>
	</div>
</div>

<h3>回调函数</h3>
<div class="code_box">
<pre>
$("#demo7").layerModel({
	close : function(){
		alert("你好，关闭回调事件");
		return true;
	}
});
</pre>
<div class="con_right">
	<p><b>close：</b>设置弹出层关闭后执行的回调函数,必须返回true或false，返回true才会关闭。</p>
	<a href="javascript:void(0)" class="run" id="demoBtn7">运行</a>
</div>
</div>

<h3>自动关闭的弹出层</h3>
<div class="code_box">
	<pre>
	$("#demo8").layerModel({
		timer : 10000
	});
	</pre>
	<div class="con_right">
		<p><b>timer：</b>设置弹出层自定关闭时间，如1*1000代表1秒。</p>
		<a href="javascript:void(0)" class="run" id="demoBtn8">运行</a>
	</div>
</div>

<h3>点击弹出层外部关闭弹出层</h3>
<div class="code_box">
	<pre>
	$("#demo19").layerModel({
		blurClose : true
	});
	</pre>
	<div class="con_right">
		<p><b>blurClose：</b>设置true泽点击弹出层外部可以将其关闭。</p>
		<a href="javascript:void(0)" class="run" id="demoBtn19">运行</a>
	</div>
</div>

<h3>自定义标题</h3>
<div class="code_box">
	<pre>
	$("#demo9").layerModel({
		title : "你是我的小呀小苹果"
	});
	</pre>
	<div class="con_right">
		<p><b>title：</b>自定义弹出层标题。</p>
		<a href="javascript:void(0)" class="run" id="demoBtn9">运行</a>
	</div>
</div>

<h3>没有关闭按钮</h3>
<div class="code_box">
	<pre>
	$("#demo10").layerModel({
		isClose : false
	});
	</pre>
	<div class="con_right">
		<p><b>isClose：</b>设置关闭按钮显示或隐藏</p>
		<a href="javascript:void(0)" class="run" id="demoBtn10">运行</a>
	</div>
</div>

<h3>设置弹出层抖动</h3>
<div class="code_box">
	<pre>
	$("#demo11").layerModel({
		shake : true
	});
	</pre>
	<div class="con_right">
		<p><b>shake：</b>设置弹出层抖动</p>
		<a href="javascript:void(0)" class="run" id="demoBtn11">运行</a>
	</div>
</div>

<h3>组合属性，自定义弹出层的位置</h3>
<div class="code_box">
	<pre>
	$("#demo12").layerModel({
		center : false,
		fixed : false,
		top : 100,
		left : 100
	});
	</pre>
	<div class="con_right">
		<p><b>组合属性：</b>自定义弹出层的位置</p>
		<a href="javascript:void(0)" class="run" id="demoBtn12">运行</a>
	</div>
</div>

<h3>维持原始模样的弹出层</h3>
<div class="code_box">
	<pre>
	$("#demo13").layerModel({
		staySame : false
	});
	</pre>
	<div class="con_right">
		<p><b>staySame：</b>是否维持原始模样，可能是平时用到的比较多的功能之一</p>
		<a href="javascript:void(0)" class="run" id="demoBtn13">运行</a>
	</div>
</div>

<h3>一个页面弹出多个互不影响的层</h3>
<div class="code_box">
	<pre>
		无
	</pre>
	<div class="con_right">
		<a href="javascript:void(0)" class="run" id="demoBtn16">运行</a>
	</div>
</div>

<h3>参数列表</h3>
<table class="param_tb">
	<colgroup>
		<col style="width:120px" />
		<col style="width:140px" />
		<col style="width:90px" />
		<col style="width:610px" />
	</colgroup>
	<thead>
		<tr class="even">
			<th>参数</th>
			<th>参数类型</th>
			<th>默认参数</th>
			<th>参数说明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>center </td>
			<td>Boolean</td>
			<td>true</td>
			<td class="t_l">
				<p><b>弹出层是否始终居中</b></p>
				<p>浏览器大小改变居中</p>
				<p>拖动滚动条居中</p>
			</td>
		</tr>
		<tr class="even">
			<td>drag</td>
			<td>Boolean</td>
			<td>true</td>
			<td class="t_l">
				<p><b>拖拽效果</b></p>
				<p>true：启用拖拽效果。</p>
				<p>false：禁用拖拽效果。</p>
			</td>
		</tr>
		<tr>
			<td>locked</td>
			<td>Boolean</td>
			<td>true</td>
			<td class="t_l">
				<p><b>是否开启遮罩层</b></p>
				<p>true：开启遮罩。</p>
				<p>false：禁用遮罩。</p>
			</td>
		</tr>
		<tr class="even">
			<td>zIndex</td>
			<td>number</td>
			<td>9999</td>
			<td class="t_l">
				<p>弹出层的层级大小</p>
			</td>
		</tr>
		<tr>
			<td>opacity </td>
			<td>number</td>
			<td>0.5</td>
			<td class="t_l">
				<p><b>背景遮罩透明度 </b></p>
				<p>0：为完全透明</p>
				<p>1：未完全不透明</p>
			</td>
		</tr>
		<tr class="even">
			<td>title </td>
			<td>string</td>
			<td>系统提示</td>
			<td class="t_l">
				<p>弹出层的标题</p>
			</td>
		</tr>
		<tr>
			<td>timer </td>
			<td>Number</td>
			<td>0</td>
			<td class="t_l">
				<p>定时关闭的时间，大于0才会有效</p>
			</td>
		</tr>
		<tr class="even">
			<td>bgColor </td>
			<td>string</td>
			<td>#fffaf6</td>
			<td class="t_l">
				<p>背景遮罩的颜色</p>
			</td>
		</tr>
		<tr>
			<td>width/height</td>
			<td>Number</td>
			<td>0/0</td>
			<td class="t_l">
				<p>设置弹出层的宽度和高度，单位为px，传参时无需带单位，建议少用，一般在样式中指定width最好。</p>
			</td>
		</tr>
		<tr class="even">
			<td>close</td>
			<td>Function</td>
			<td>function(){return true}</td>
			<td class="t_l">
				<p>设置关闭弹出层后执行的回调函数，只有返回false才不会关闭。</p>
			</td>
		</tr>
		<tr>
			<td>left/top</td>
			<td>Number</td>
			<td>350/100</td>
			<td class="t_l">
				<p>设置弹出层的位置，单位为px，传参时无需带单位，要想让其生效，必须设置fixed:false和center:false。如{"fixed"：false,"center":false,"left":200,"top":100}</p>
			</td>
		</tr>
		<tr class="even">
			<td>head</td>
			<td>Boolean</td>
			<td>true</td>
			<td class="t_l">
				<p>是否显示头部title</p>
			</td>
		</tr>
		<tr>
			<td>isClose</td>
			<td>Boolean</td>
			<td>true</td>
			<td class="t_l">
				<p>是否出现关闭按钮</p>
			</td>
		</tr>
		<tr class="even">
			<td>shake</td>
			<td>Boolean</td>
			<td>false</td>
			<td class="t_l">
				<p>是否出现抖动效果</p>
			</td>
		</tr>
		<tr>
			<td>staySame</td>
			<td>Boolean</td>
			<td>false</td>
			<td class="t_l">
				<p>是否保持弹出元素原样，也就是没有插件自己装饰的头部和边框，元素本来啥样就弹出啥样。</p>
			</td>
		</tr>
		<tr>
			<td>init</td>
			<td>function</td>
			<td>null</td>
			<td class="t_l">
				<p>初始化弹出层完成后的回调函数！</p>
			</td>
		</tr>
		<tr>
			<td>blurClose</td>
			<td>Boolean</td>
			<td>false</td>
			<td class="t_l">
				<p>是否点击弹出层外部空间可将其关闭。</p>
			</td>
		</tr>
	</tbody>
</table>

<h3>扩展方法或者小提示</h3>
<table class="param_tb">
	<colgroup>
		<col style="width:260px" />
		<col style="width:700px" />
	</colgroup>
	<thead>
		<tr class="even">
			<th>方法名</th>
			<th>使用说明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>close </td>
			<td class="t_l">
				<p><b>调用close方法可关闭弹出的层</b></p>
				<p>如调用$("#aaa").layerModel()弹出了一个层</p>
				<p>那么给弹出层内的某个元素绑定时间onclick="$('#aaa').close();"即可关闭这个层</p>
				<p><a href="javascript:;" onclick="$('#demo14').layerModel();">点我演示下</a></p>
			</td>
		</tr>
		<tr class="even">
			<td>fix</td>
			<td class="t_l">
				<p><b>调用fix方法可手动修正弹出层的位置</b></p>
				<p>如果通过js方法给弹出层追加了元素导致弹出层位置变了，那么调用fix方法可手动修正弹出层的位置</p>
				<p>
					<a href="javascript:;" onclick="$('#demo15').layerModel();">运行看看</a><br/>
				</p>
			</td>
		</tr>
	</tbody>
</table>
</div>
</body>
</html>